<template>
	<el-dialog v-model="showDialog" title="编辑" width="30%">
		<el-form
			ref="deptFormRef"
			:model="state.formData"
			:rules="state.rules"
			label-width="120px"
		>
			<el-form-item label="所属菜单" prop="parentId">
				<el-select
					v-model="state.formData.name"
					placeholder="Select"
					size="large"
				>
					<el-option label="菜单管理" value="111" />
					<el-option label="组织管理" value="222" />
					<el-option label="人事管理" value="333" />
					<el-option label="系统管理" value="444" />
				</el-select>
			</el-form-item>
			<el-form-item label="生成类型" prop="parentId">
				<el-select
					v-model="state.formData.type"
					placeholder="Select"
					size="large"
				>
					<el-option label="列表页面" value="111" />
					<el-option label="树表页面" value="222" />
					<el-option label="双列表页面" value="333" />
					<el-option label="表单组件" value="444" />
				</el-select>
			</el-form-item>
			<el-form-item label="选择模型" prop="parentId">
				<el-select
					v-model="state.formData.model"
					placeholder="Select"
					size="large"
				>
					<el-option label="模型1" value="111" />
					<el-option label="模型2" value="222" />
					<el-option label="模型3" value="333" />
					<el-option label="模型4" value="444" />
				</el-select>
			</el-form-item>
			<el-form-item label="生成方式">
				<el-radio-group v-model="state.formData.uploadGit">
					<el-radio :label="1">推动到git</el-radio>
					<el-radio :label="0">下载到本地</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item
				v-if="state.formData.uploadGit"
				label="选择git仓库"
				prop="parentId"
			>
				<el-select
					v-model="state.formData.git"
					placeholder="Select"
					size="large"
				>
					<el-option label="git1" value="111" />
					<el-option label="git2" value="222" />
					<el-option label="git3" value="333" />
					<el-option label="git4" value="444" />
				</el-select>
			</el-form-item>
			<el-form-item label="备注">
				<el-input
					v-model="state.formData.defaultProps"
					:rows="2"
					type="textarea"
					placeholder="请输入备注"
				/>
			</el-form-item>
		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="handleGenerator">
					代码查看
				</el-button>
				<el-button type="primary" @click="handleSubmit"> 保 存 </el-button>
				<el-button @click="closeDialog"> 取 消 </el-button>
			</div>
		</template>
	</el-dialog>
	<code-dialog ref="CodeDialogRef"></code-dialog>
</template>
<script setup lang="ts">
import CodeDialog from '@/components/CodeDialog/index.vue'
import { getCodeList } from '@/components/VueGenerator/generator'
import { beautifyJS, beautifyHTML } from '@/utils/beautify'
import { filesToZip } from '@/utils/download'

const CodeDialogRef = ref()
defineOptions({
	name: 'GeneratorAdd',
	inheritAttrs: false
})
const showDialog = ref(false)
const state = reactive({
	formData: {
		id: 123,
		name: '',
		code: '',
		type: '',
		model: '',
		uploadGit: 0,
		git: '',
		defaultProps: ''
	},
	rules: {}
})

const handleSubmit = () => {
	if (state.formData.uploadGit === 0) {
		const data = getCodeList()
		data.forEach(item => {
			item.vueModel =
				item.mode === 'vue'
					? beautifyHTML(item.vueModel)
					: beautifyJS(item.vueModel)
		})
		filesToZip(data, 'src.zip')
	}
	showDialog.value = false
}

const handleGenerator = () => {
	const data = getCodeList()
	data.forEach(item => {
		item.vueModel =
			item.mode === 'vue'
				? beautifyHTML(item.vueModel)
				: beautifyJS(item.vueModel)
	})
	CodeDialogRef.value.openDialog(data)
}
const closeDialog = () => {
	showDialog.value = false
}

const openDialog = () => {
	showDialog.value = true
}
defineExpose({
	openDialog
})
</script>
